<template>
  <a-spin :spinning="spinning">
    <base-breadcrumb :title="$route.meta.title">
    <fullScreen />
      <div v-if="editModel * 1 > 0">
        <div class="updateInformation">
          <div class="top-conent">
            <title-name title="调整信息"></title-name>
            <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :rules="editModel == 0 ? {} : rules">
              <custom-form :formList="formList" :form="form" :is-emit="false" :editModel="editModel == 0 ? '' : ''">
                <template #fileInfos>
                  <template v-if="editModel != 0">
                    <l-table businessCode="FACE12" :uploadArrys.sync="form.fileInfos"></l-table>
                  </template>
                  <file-link v-else :fileList="form.fileInfos" style="margin-top: -3px"></file-link>
                </template>
              </custom-form>
            </a-form-model>
          </div>
          <nav class="nav-wrapper">
            <a-steps :current="current">
              <a-step>
                <template slot="title">
                  <a-tooltip>
                    <template slot="title">
                      1.选择是否引用最新公司级成本科目;2.选择是否新增临时科目
                    </template>
                    项目级成本科目调整
                  </a-tooltip>
                </template>
              </a-step>
              <a-step>
                <template slot="title">
                  <a-tooltip>
                    <template slot="title">
                      对调整/新增节点，进行总目标成本、开始时间与考核时间数据填写
                    </template>
                    调整总目标成本数据
                  </a-tooltip>
                </template>
              </a-step>
              <a-step>
                <template slot="title">
                  <a-tooltip>
                    <template slot="title">
                      对调整/新增节点，进行目标成本分解数据填写
                    </template>
                    分解目标成本数据
                  </a-tooltip>
                </template>
              </a-step>
            </a-steps>
            <a-button v-show="current > 0" type="primary" @click="handCurrent">上一步</a-button>
            <a-button v-show="current < 2" type="primary" @click="handleNext">下一步</a-button>
            <p class="unit">单位：元</p>
          </nav>
          <div class="content">
            <CostAccountInit v-if="current === 0" ref="costAccountInit" class="page-wrapper" :resData="resData" @changeGetData="changeGetData" @getDetailFn="getDetailFn" :id="id" />
            <FillingInData v-if="current === 1" ref="fillingInData" class="page-wrapper" :id="id" :spinning.sync="spinning" :editModel="editModel" />
            <DecompositionData v-if="current === 2" ref="decompositionData" class="page-wrapper" :id="id" :spinning.sync="spinning" />
            <Approving v-if="current === 3" ref="approving" class="page-wrapper" />
          </div>
        </div>
        <div class="btn_box page-btn-right-top" v-if="editModel != 0">
          <a-button class="button_right" type="primary" @click="handleSave('0')">保存草稿</a-button>
          <a-button class="button_right" type="primary" @click="handleSave('1')">提交</a-button>
          <a-button @click="goBack">返回</a-button>
        </div>
      </div>
      <Informationdetail v-else :isAudit="isAudit"></Informationdetail>
      <ErrorTable :visible.sync="visible" :errorData="errorData"></ErrorTable>
      <selectApprover :businessId="businessId" :processConfig="setProcessConfig"></selectApprover>
    </base-breadcrumb>
  </a-spin>
</template>
<script>
import CostAccountInit from './components/CostAccountInit'
import FillingInData from './components/FillingInData'
import DecompositionData from './components/DecompositionData'
import Approving from './components/Approving'
import ErrorTable from '../ErrorTable'
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import { getDetail, submit, queryAdjustTreeAndSave } from '@/api/businessAffairs/updateInformation'
import Informationdetail from './detail'
import fullScreen from "../../../../headquartersDashboard/components/fullScreen/fullScreen"
export default {
  name: 'updateInformation',
  extends: new BaseEditPage(),
  components: {
    CostAccountInit,
    FillingInData,
    DecompositionData,
    Approving,
    ErrorTable,
    Informationdetail,
    fullScreen
  },
  data() {
    return {
      // 当前进度
      current: 0,
      spinning: false,
      visible: false,
      right: false,
      form: {
        content: null
      },
      editModel: 0, // 操作状态:1查看;2编辑
      rules: {
        content: [{ required: true, message: '请输入调整内容', trigger: 'blur' }]
      }, // 校验规则
      id: '',
      resData: {}, //详情数据
      errorData: [],
      projectId: this.$userInfo().currentPost.projectId, //当前项目
      //获取流程配置值
      processConfig: null,
      //点击提交发送流程配置值
      setProcessConfig: null,
      businessId: null
    }
  },
  props: {
    isAudit: {
      // 是否作为审批详情
      type: Boolean,
      default: false
    }
  },
  computed: {
    formList() {
      return [
        {
          keyName: 'content',
          type: 'BaseTextarea',
          disabled: this.editModel == 0,
          label: '调整内容',
          span: 24
        },
        {
          slot: true,
          keyName: 'fileInfos',
          label: '调整线下审核资料',
          span: 24,
          businessCode: 'FACE12'
        }
      ]
    }
  },
  async mounted() {
    if (this.editModel * 1 === 1 && !this.isAudit) {
      //新增
      this.getQueryAdjustTreeAndSave()
    } else {
      this.id && this.getDetailFn()
    }
    //获取通过获取流程配置值
    this.processConfig = await this.$getConfigFn('com_business_cost_project_plan_adjust')
  },
  watch: {
    current: {
      handler(val) {
        if (val * 1 < 1) {
          this.id && this.getDetailFn()
        }
      }
    },
    isAudit: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.editModel = 0
          })
        }
      }
    }
  },
  methods: {
    //切换是否引用最新公司级成本科目
    changeGetData() {
      this.getDetailFn()
    },
    /**
     * @description: 下一步
     * @return {void}
     */
    handleNext() {
      switch (this.current) {
        case 0:
          this.editModel === 1 ? this.right && this.current++ : this.current++

          break
        case 1:
          this.editModel = 1
          this.$refs.fillingInData
            .handleSubmit(1)
            .then(res => {
              this.current++
            })
            .catch(err => {
              console.log(err)
              if (Array.isArray(err)) {
                this.visible = true
                this.errorData = err.map((el, index) => {
                  el.key = index + ''
                  return el
                })
              }
            })
          break
        case 2:
          break
        case 3:
          break
      }
    },
    /**
     * @description: 提交
     * @return {void}
     */
    handleSubmit() {
      this.current++
    },
    //校验
    validateForm() {
      let flag = false
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          this.$message.warning('请填写完所有必填项信息')
        }
        flag = valid
      })
      return flag
    },
    //获取详情
    getDetailFn(flag) {
      // flag false 展示二级科目
      this.spinning = true
      let req = { id: this.id, isHide: false }
      if (flag === false) {
        req.isShow = false
      }
      getDetail(req)
        .then(res => {
          if (res.code == '0') {
            this.right = true
            let { content, fileInfos } = res.data
            if (content) {
              this.form.content = content
            }
            if (fileInfos?.length) {
              this.form.fileInfos = fileInfos
            }
            this.spinning = false
            this.resData = res?.data
          }
        })
        .catch(err => {
          this.right = false
          this.spinning = false
        })
    },
    //保存
    handleSave(status) {
      if (status == '0') {
        this.$refs.fillingInData?.handleSubmit(0).then(res => {})
      }
      let fileIds = []
      if (this.form?.fileInfos && this.form?.fileInfos.length > 0) {
        this.form.fileInfos.forEach(item => {
          fileIds.push(item.commonId)
        })
      }
      let parms = {
        id: this.id,
        content: this.form.content,
        projectId: this.projectId,
        quote: this.form.quote,
        status,
        fileIds
      }
      if (status == '1' && !this.validateForm()) {
        return
      }
      if (status == '1') {
        let _that = this
        this.$confirm({
          title: '确定是否提交?',
          width: '600px',
          content: (
            <p>
              1.如果涉及目标成本变化，提交后将进入审批流程；
              <br />
              2.如果不涉及目标成本变化，提交后将相关数据将调整功能，不能修改。
            </p>
          ),
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            _that.sureSubmit(parms, status)
          }
        })
      } else {
        this.sureSubmit(parms, status)
      }
    },
    sureSubmit(parms, status) {
      let msg = status * 1 ? '提交' : '保存草稿'
      this.spinning = true
      this.noSubmitApprovalConfirm(status == '1' ? this.processConfig : 6, async flag => {
        if (!flag) {
          this.spinning = false
          return
        }
        submit(parms)
          .then(res => {
            if (res.code == '0') {
              this.spinning = false
              if ((!res.data.messages || res.data.messages.length == 0) && res.data.process === 0) {
                this.$message.success(`${msg}成功`)
                this.businessId = res.data.id || this.id
                this.setProcessConfig = this.processConfig
                return
                // status * 1 === 1 && this.$multiTab.close()
              } else {
                if (Array.isArray(res.data.messages) && res.data.messages.length > 0) {
                  this.visible = true
                  this.errorData = res.data.messages.map((el, index) => {
                    el.key = index + ''
                    return el
                  })
                } else {
                  this.$message.success(`${msg}成功`)
                  status * 1 === 1 && this.$multiTab.close()
                }
              }
            }
          })
          .catch(err => {
            this.spinning = false
            if (Array.isArray(err)) {
              this.visible = true
              this.errorData = err.map((el, index) => {
                el.key = index + ''
                return el
              })
            }
          })
      })
    },
    // 查询并新增并添加数据
    getQueryAdjustTreeAndSave() {
      let req = {
        projectId: this.projectId
      }
      this.spinning = true
      queryAdjustTreeAndSave(req)
        .then(res => {
          if (res.code == '0') {
            this.form = { ...this.form, ...res.data }
            this.spinning = false
            this.resData = res?.data
            this.id = res?.data.id
            this.right = true
          }
        })
        .catch(err => {
          this.spinning = false
          this.right = false
        })
    },
    goBack() {
      if (this.current == 1) {
        this.$refs.fillingInData?.handleSubmit(0).then(res => {})
      }
      this.$multiTab.close()
    },
    handCurrent() {
      if (this.current == 1) {
        this.$refs.fillingInData?.handleSubmit(0).then(res => {})
      }
      this.current--
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.nav-wrapper {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #e8e8e8;
  background-color: #fff;
  margin-top: 12px;
  position: relative;
  .ant-btn {
    margin-left: 16px;
  }
 
  @{deep} .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title,
  @{deep} .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description,
  @{deep} .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title,
  @{deep} .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description {
    color: #1890ff !important;
  }
  @{deep} .ant-steps-item-description {
    max-width: 200px;
  }
  .unit {
    position: absolute;
    right: 20px;
    bottom: -15px;
  }
}
.btn_box{
    right: 4%;
  }
.page-wrapper {
  height: calc(100% - 123px);
}
@{deep} .table-wrapper .plTableBox {
  .el-table td {
    padding: 5px 0;
    height: 35px !important;
  }
  .el-table th {
    padding: 5px 0;
    height: 35px !important;
  }
}
@{deep} .table-wrapper .el-table td p,
@{deep} .table-wrapper .elx-table td p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
@{deep}  .plTableBox .el-table .el-table__body tr,
@{deep}  .plTableBox .el-table .el-table__body td{
  height: 35px !important;
  margin: 0;
  padding: 0;
}
.updateInformation {
  // margin: 20px 10px 20px 20px;
  @{deep} {
    .top-conent {
      padding: 15px;
      background-color: #fff;
    }
    .content {
      height: 700px;
      padding: 15px;
      background-color: #fff;
    }
  }
}
</style>
